<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Chem Notebook</title>
  <!--
  <script src="../../../src/kekule.js?modules=chemWidget,algorithm&min=false"></script>
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />
  -->
  <script src="../../libs/kekule/kekule.js?modules=chemWidget,algorithm"></script>
  <link rel="stylesheet" type="text/css" href="../../libs/kekule/themes/default/kekule.css" />
  <script src="res/chemNote.js"></script>
  <link rel="stylesheet" type="text/css" href="res/chemNote.css" />

  <script>
    var STORAGE_KEY = 'chemNoteData';
    var dataSet, noteListView, noteEditor, composer;

    function getInitData()
    {
      var demoIntro = 'A demo app adapted for both desktop and mobile platforms.\n\n' +
        'Each piece of note may contain texts and chemistry objects. ';
      var demoIntro2 = 'Created notes will be saved by the local storage of web browser.';
      var demoIntroChemObjStr = '{"coordPos2D":0,"coordPos3D":0,"defAutoScaleRefLength":0.8,"root":{"id":"o1","coordPos2D":0,"coordPos3D":0,"children":{"id":"o2","coordPos2D":0,"coordPos3D":0,"items":[{"__type__":"Kekule.Molecule","id":"m1","coordPos2D":0,"coordPos3D":0,"renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.502349097842262,"y":38.33168247767857,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a4","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.293333333333333,"y":-1.3599999999999994,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a6","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.9861536563608841,"y":-1.759999999999998,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a2","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.39948698969421814,"y":-1.759999999999998,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a5","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.9861536563608841,"y":-2.5600000000000023,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a1","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.39948698969421814,"y":-2.5600000000000023,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a3","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.293333333333333,"y":-2.9599999999999937,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b5","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","id":"b3","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[0,2]},{"__type__":"Kekule.Bond","id":"b6","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[1,3]},{"__type__":"Kekule.Bond","id":"b1","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[2,4]},{"__type__":"Kekule.Bond","id":"b4","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[3,5]},{"__type__":"Kekule.Bond","id":"b2","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[4,5]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Glyph.StraightLine","id":"p1","coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null],"coord2D":{"x":4.529015764508928,"y":38.346920572916666,"__type__":"object"},"ctab":{"nodes":[{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n1","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":3.219047619047619,"y":-2.1447619047619,"__type__":"object"},"coord3D":{"x":0,"y":0,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n2","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":4.754285714285716,"y":-2.1447619047619,"__type__":"object"},"coord3D":{"x":1.2000000000000002,"y":0,"z":0,"__type__":"object"},"nodeType":"location"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c1","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"endArrowType":"open","endArrowWidth":0.2,"endArrowLength":0.2,"lineLength":1.5,"__type__":"object"},"connectedObjs":[0,1]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Molecule","id":"m2","coordPos2D":0,"coordPos3D":0,"renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a7","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":6.436561172468792,"y":36.202158668154766,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a8","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":5.743740849441242,"y":36.60215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a9","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":7.129381495496341,"y":36.60215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"Cl"},{"__type__":"Kekule.Atom","id":"a10","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":6.436561172468792,"y":35.40215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a11","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":5.05092052641369,"y":36.202158668154766,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b7","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","id":"b8","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,2]},{"__type__":"Kekule.Bond","id":"b9","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedObjs":[0,3]},{"__type__":"Kekule.Bond","id":"b10","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[1,4]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.TextBlock","id":"t1","coordPos2D":21,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"needRecalcSize":true,"coord2D":{"x":4.212825288318453,"y":36.35453962053571,"__type__":"object"},"size2D":{"x":0.2560000000000002,"y":0.4480000000000075,"__type__":"object"},"text":"+"},{"__type__":"Kekule.Molecule","id":"m3","coordPos2D":0,"coordPos3D":0,"renderOptions":{"expanded":true,"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":8.433777669270833,"y":36.53739676339286,"__type__":"object"},"charge":0,"parity":null,"formula":{"sections":[{"__type__":"object","obj":{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"charge":0,"parity":null,"isotopeId":"Al"},"count":1},{"__type__":"object","obj":{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"charge":0,"parity":null,"isotopeId":"Cl"},"count":3}],"charge":0,"radical":0,"__type__":"Kekule.MolecularFormula"}},{"__type__":"Kekule.Glyph.HeatSymbol","id":"p2","coordPos2D":0,"coordPos3D":0,"renderOptions":{"strokeWidth":1.5,"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":8.1404443359375,"y":38.11834914434524,"__type__":"object"},"ctab":{"nodes":[{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n3","interactMode":-1,"coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null],"coord2D":{"x":0.3390476190476175,"y":-2.0057142857142836,"__type__":"object"},"coord3D":{"x":0,"y":0.2,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n4","interactMode":-1,"coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null,null],"coord2D":{"x":0.512252699804506,"y":-2.305714285714288,"__type__":"object"},"coord3D":{"x":0.17320508075688776,"y":-0.09999999999999996,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n5","interactMode":-1,"coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null],"coord2D":{"x":0.16584253829073248,"y":-2.305714285714288,"__type__":"object"},"coord3D":{"x":-0.17320508075688767,"y":-0.10000000000000009,"z":0,"__type__":"object"},"nodeType":"location"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c2","interactMode":-1,"coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedObjs":[0,1]},{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c3","interactMode":-1,"coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedObjs":[1,2]},{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c4","interactMode":-1,"coordPos2D":0,"coordPos3D":0,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedObjs":[2,0]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Molecule","id":"m4","coordPos2D":0,"coordPos3D":0,"renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":9.865777994791667,"y":38.89377766927083,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a14","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":1.332820323027553,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a18","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.0256406460551055,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a15","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.6400000000000023,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a13","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":1.332820323027553,"y":-3.066666666666663,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a19","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.7184609690826544,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a21","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.0256406460551073,"y":-1.066666666666677,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a16","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.052820323027548355,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a12","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.6400000000000023,"y":-3.4666666666666686,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a20","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":3.4112812921102034,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a17","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.052820323027548355,"y":-3.066666666666663,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b17","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","id":"b13","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[0,2]},{"__type__":"Kekule.Bond","id":"b12","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[0,3]},{"__type__":"Kekule.Bond","id":"b18","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[1,4]},{"__type__":"Kekule.Bond","id":"b20","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedObjs":[1,5]},{"__type__":"Kekule.Bond","id":"b14","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[2,6]},{"__type__":"Kekule.Bond","id":"b11","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[3,7]},{"__type__":"Kekule.Bond","id":"b19","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[4,8]},{"__type__":"Kekule.Bond","id":"b15","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[6,9]},{"__type__":"Kekule.Bond","id":"b16","coordPos2D":0,"coordPos3D":0,"renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedObjs":[7,9]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.TextBlock","id":"t2","coordPos2D":21,"coordPos3D":0,"renderOptions":{"fontFamily":"Georgia, Times New Roman, Times, serif","fontSize":20,"useAtomSpecifiedColor":false,"color":"#000066","__type__":"object"},"overrideRenderOptionItems":[null,null],"needRecalcSize":true,"coord2D":{"x":4.825777994791667,"y":34.6804443359375,"__type__":"object"},"size2D":{"x":6.6016000976562506,"y":0.6400000000000006,"__type__":"object"},"text":"Friedel-Crafts Reaction"}],"__type__":"Kekule.ChemObjList"},"__type__":"Kekule.ChemSpaceElement"},"enableAutoId":true,"screenSize":{"x":900,"y":1500,"__type__":"object"},"size2D":{"x":24,"y":40,"__type__":"object"},"__type__":"Kekule.ChemDocument"}';
      var demoIntroImgPreview = '';
      var nowTime = Date.now();
      var result = [
        {'title': 'Chem Note Demo', 'text': demoIntro, 'chemObj': demoIntroChemObjStr, 'imgPreview': demoIntroImgPreview, 'modifiedTime': nowTime},
        {'title': 'Note persistence', 'text': demoIntro2, 'modifiedTime': nowTime}
      ];
      return result;
    }

    function init()
    {
      dataSet = new ChemNote.NoteDataSet();
      dataSet.loadFromStorage(STORAGE_KEY);
      if (!dataSet.getData() || !dataSet.getData().length)
        dataSet.setData(getInitData());

      var panelSwitcher = new ChemNote.PanelSwitcher();
      panelSwitcher.setPanels([$('noteListPanel'), $('noteEditPanel')]);

      noteListView = Kekule.Widget.getWidgetById('noteListView');
      noteListView.setDataSet(dataSet);

      noteEditor = Kekule.Widget.getWidgetById('noteEditor');

      noteListView.on('select', function(e){
        var note = e.note;
        noteEditor.setNote(note);
        panelSwitcher.setActivePanelIndex(1);
      });

      var btnCreateNote = Kekule.Widget.getWidgetById('btnCreateNote');
      btnCreateNote.on('execute', function(e){
        var note = {};
        noteEditor.setNote(note);
        panelSwitcher.setActivePanelIndex(1);
      });

      var btnDoneEdit = Kekule.Widget.getWidgetById('btnDoneEditNote');
      btnDoneEdit.setShowText(false);
      btnDoneEdit.on('execute', function(e){
        var note = noteEditor.getNote();
        if (note)
        {
          noteEditor.saveToNote(note);
          if (noteListView.hasItem(note))
            noteListView.modifyNote(note);
          else
            noteListView.addNote(note);
          panelSwitcher.setActivePanelIndex(0);
          dataSet.saveToStorage(STORAGE_KEY);
        }
      });
      var btnCancelEdit = Kekule.Widget.getWidgetById('btnCancelEditNote');
      btnCancelEdit.setShowText(false);
      btnCancelEdit.on('execute', function(e){
        panelSwitcher.setActivePanelIndex(0);
      });
      var btnRemoveNote = Kekule.Widget.getWidgetById('btnRemoveEditNote');
      btnRemoveNote.setShowText(false);
      btnRemoveNote.on('execute', function(e){
        var handled = true;
        var note = noteEditor.getNote();
        if (note)
        {
          if (noteListView.hasItem(note))
          {
            if (window.confirm('Are you sure to delete this note?'))
            {
              noteListView.removeNote(note);
              dataSet.saveToStorage(STORAGE_KEY);
              handled = true;
            }
            else
              handled = false;
          }
          if (handled)
          {
            panelSwitcher.setActivePanelIndex(0);
          }
        }
      });
    }
    Kekule.X.domReady(init);
  </script>

  <style>
    #noteListPanel, #noteEditPanel
    {
      float: left;
    }
  </style>
</head>
<body>
  <section class="Panel" id="noteListPanel" data-widget="Kekule.Widget.DumbWidget" style="z-index: 2">
    <h1 class="SectionTitle">
      <span class="Caption">Notes</span>
        <span class="TitleToolbar" data-widget="Kekule.Widget.ButtonGroup">
          <a id="btnCreateNote" class="ToolButton" data-widget="Kekule.Widget.Button">&#10010;</a>
        </span>
    </h1>
    <ul id="noteListView" class="SectionContent" data-widget="ChemNote.NoteListView"></ul>
  </section>
  <section class="Panel" id="noteEditPanel" data-widget="Kekule.Widget.DumbWidget">
    <h1 class="SectionTitle">
      <span class="Caption">Edit Note</span>
        <span class="TitleToolbar" data-widget="Kekule.Widget.ButtonGroup">
          <a id="btnDoneEditNote" class="ToolButton K-Res-Button-YesOk" data-widget="Kekule.Widget.Button">&#10004;</a>
          <a id="btnCancelEditNote" class="ToolButton K-Res-Button-NoCancel" data-widget="Kekule.Widget.Button">&#10006;</a>
          <a id="btnRemoveEditNote" class="ToolButton K-Res-Icon-Remove" data-widget="Kekule.Widget.Button">&#10006;</a>
        </span>
    </h1>
    <div id="noteEditor" class="SectionContent" data-widget="ChemNote.NoteEditor"></div>
  </section>
</body>
</html>